<template>
	<div class="header">
		<div class="header-back"></div>
		<div class="header-title">校园选择</div>
	</div>
	<div class="header-row"></div>
	<div class="g-search-box">
		<input type="search" placeholder="请输入学校名称" class="g-search-input" />
		<div class="g-search-btn icon-search"></div>
	</div>
	<div class="flex flex-al-center bg-fff pd-10 mgb-10">
		<div class="iconfont icon-location_light cl-success"></div>
		<div>离你最近的大学：</div>
		<navigator class="cl-primary">厦门大学</navigator>
	</div>
	<div class="scbox">
		<div class="scbox-menu">
			<div class="scbox-menu-item scbox-menu-active">北京市</div>
			<div class="scbox-menu-item">湖南省</div>
			<div class="scbox-menu-item">广东省</div>
			<div class="scbox-menu-item">广西壮族自治区</div>
			<div class="scbox-menu-item">海南省</div>
			<div class="scbox-menu-item">重庆市</div>


		</div>
		<div class="scbox-main">
			<div class="ctlist">
				<div class="ctlist-hd">北京市</div>
				<div class="site-list">
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						清华大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						戏剧学院
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>

				</div>
				<div class="ctlist-hd">北京市</div>
				<div class="site-list">
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						清华大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						戏剧学院
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>

				</div>
				<div class="ctlist-hd">北京市</div>
				<div class="site-list">
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						清华大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						戏剧学院
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>
					<navigator class="site-list-item" url="index.html?m=index&a=xyo2o">
						北京大学
					</navigator>

				</div>
			</div>

		</div>
	</div>

</template>

<style>
 
	.scbox-menu,.scbox-main{
		position: fixed;
		top: 130px;
	}
	.scbox-menu {
		
		left: 0;
		right: 0px;
		bottom: 0px;
		width: 80px;
		margin-right: 3px;
		background-color: #FDFDF7;
	}

	.scbox-menu-item {
		padding: 12px 10px;
		color: #736357;
	}

	.scbox-menu-active {
		background: #F1F1C9;
	}

	.scbox-main {
		left: 83px;
		right: 0px;
		bottom: 0px;
		background-color: #fff;
	}

	.ctlist-hd {
		background-color: #f7f7f7;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
	}

	.site-list-item {
		height: 40px;
		line-height: 40px;
		margin: 0 20px;
		border-bottom: 1px dotted #ddd;
		overflow: hidden;
		white-space: normal;
		text-overflow: ellipsis;
	}
</style>
